{extend name='../app/Admin/View/layout.php'/}

{block name='header'}
<style>
    body {
        height: 100%;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif;
        margin: 0px;
        padding: 0px;
    }
    #app, html {
        height: 100%;
        margin: 0px;
        padding: 0px;
    }
    #login{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        height: 100%;
        background-image: url(/static/image/login-background.png);
        background-size: cover;
    }
    .login-form {
        border-radius: 6px;
        background: #fff;
        width: 350px;
        padding: 25px 25px 5px 25px;
    }
    form {
        display: block;
        margin-top: 0em;
    }
    .title {
        margin: 0 auto 30px auto;
        text-align: center;
        color: #707070;
    }
    .el-input__icon, .el-input__prefix {
        height: 100%;
        text-align: center;
        -webkit-transition: all .3s;
        transition: all .3s;
    }
    .font-i{
        font-size: 15px;
        margin-left: 5px;
    }
    .el-form-item{
        margin-bottom: 30px;
    }

</style>
{/block}
{block name='main'}
    <div id="login">
        <form class="el-form login-form" action="" method="post">
            <h3 class="title">后台管理系统</h3>
            <el-form-item>
                <el-input v-model="account"  size="large"  placeholder="请输入账号" >
                    <template #prefix>
                        <el-icon size="large"  class="el-input__icon"><User /></el-icon>
                    </template>
                </el-input>
            </el-form-item>
               <el-form-item>
                <el-input size="large" v-model="password" type="password" placeholder="请输入密码" >
                    <template #prefix>
                        <el-icon size="large"  class="el-input__icon"><Key /></el-icon>
                    </template>
                </el-input>
            </el-form-item>

            <div class="el-form-item el-form-item--medium" style="width: 100%;">
                <div class="el-form-item__content">
                    <el-button :loading="login_loading" @keyup.enter.native="login" @click="login" id="button" class="el-button el-button--primary el-button--medium" style="width: 100%;">
                        {{ login_text }}</el-button>
                </div>
            </div>

        </form>
    </div>

{/block}

{block name='footer'}
    <script>
        if (window !== window.top) {
            window.top.location.href = location.href;
        }

        VueInit.data.account = '';
        VueInit.data.password = '';
        VueInit.data.account_message = '';
        VueInit.data.password_message = '';
        VueInit.data.login_loading = false;
        VueInit.data.login_text = '登 录';


        VueInit.methods.login = function (){
            this.login_loading = true;
            this.login_text    = '登 录 中 ...';
            axios({
                url:"",
                method:'post',
                data:{
                    account:this.account,
                    password:this.password,
                }
            }).then(response => {
                if(response.data.code!==200){
                    this.login_loading = false;
                    this.login_text    = '登 录';
                    this.$message.error(response.data.msg);
                }else {
                    this.$message.success('登录成功')
                    setTimeout(() => {
                        window.location.href = response.data.data.redirect;
                    }, 500);
                }
            }).catch(error => {
                this.login_loading = false;
                this.login_text    = '登 录';
                this.$message.error(error)
            })
        }

        VueInit.event.addHandler("created:enterKeyListener", function (){
            document.addEventListener("keydown", (event) => {
                if (event.key === 'Enter') {
                    this.login();
                }
            });
        });

    </script>
{/block}